<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文章管理</title>
    <link rel="stylesheet" href="./css/article.css">
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form method="post" action="#" id="articleForm">
    输入关键词：<input type="text" name="articleTitle" id="articleTitle" placeholder="文章标题关键字">
    <button type="button" class="queryBtn" style="color: white; background-color: #1d85eb">查询</button>
    <input type="button" class="button1" value="删除勾选项"  id="deleteBatch">
</form>
<table border="1" cellspacing="0" align="center" class="con-b">
    <h2>文章列表：</h2>
    <tbody>
        <thead>
        <tr class="row">
            <td><input type="checkbox" id="j_cbAll">全选</td>
            <td>文章编号</td>
            <td>文章标题</td>
            <td>发布者</td>
            <td>发布时间</td>
            <td>删除文章</td>
        </tr>
        </thead>


    <tbody id="j_tb">

    </tbody>

    <tbody id="tfoot">

    </tbody>
</table>
<script>

    var pageSize=5;
    function firstPage(){
        console.info("first page");
        loadWithPage(1,pageSize);
    }

    function prePage(currentPage){
        console.info("pre page");
        if(currentPage==0){
            loadWithPage(1,pageSize);
        }else{
            loadWithPage(currentPage,pageSize);
        }

    }

    function nextPage(currentPage,pages){
        console.info("next page");
        if(currentPage==0){
            loadWithPage(pages,pageSize);
        }else{
            loadWithPage(currentPage,pageSize);
        }
    }

    function tailPage(currentPage){
        console.info("tail page");
        loadWithPage(currentPage,pageSize);
    }

    function loadWithPage(currentPage,pageSize){
        $.ajax({
            type: "get",
            url:"article/loadWithPage.do?currentPage="+currentPage+"&pageSize="+pageSize,
            dataType: "json",
            success:function (result){
                console.info(result);
                $("#j_tb").empty();
                $("#tfoot").empty();
                $(result.list).each(function (index,item){
                    var $trs =
                        `<tr>
                            <td><input type="checkbox" name="ck" id="ck" value="`+item.articleId+`"></td>
                            <td className="lf">`+item.articleId+`</td>
                            <td><a href="read.jsp?articleId=`+item.articleId+`">`+item.articleTitle+`</a></td>
                            <td className="lf">`+item.userName+`</td>
                            <td className="lf">`+item.articleDate+`</td>
                            <td><button class="deleteBtn" type="submit" style="color: white; background-color: #ef5050">删除</button></td>
                        </tr>`;
                    $("#j_tb").append($trs);
                });
                var pageInfo = `
                    <tr>
                        <td colspan="6">
                            <span>共有`+result.pages+`页，当前是第`+result.pageNum+`页</span>&nbsp;&nbsp;
                            <a href="javasrcipt:void(0)" onclick="firstPage()">首页</a>
                            <a href="javasrcipt:void(0)" onclick=prePage(`+result.prePage+`)">上一页</a>
                            <a href="javasrcipt:void(0)" onclick=nextPage(`+result.nextPage+`,`+result.pages+`)">下一页</a>
                            <a href="javasrcipt:void(0)" onclick=tailPage(`+result.pages+`)">尾页</a>
                        </td>
                    </tr>`;
                $("#tfoot").append(pageInfo);
            }
        })
    }


    $(function (){
        loadWithPage(1,5);
        // findAllUsers();
    });

    function findAllUsers(){
        $.ajax({
            type:"get",
            url:'article/findAllArticle.do',
            dataType:"json",
            success:function (result){
                console.info(result);
                $(result).each(function (index,item) {
                    var $trs =
                        `<tr>
                            <td><input type="checkbox" name="ck" id="ck" value="`+item.articleId+`"></td>
                            <td className="lf">`+item.articleId+`</td>
                            <td><a href="">`+item.articleTitle+`</a></td>
                            <td className="lf">`+item.userName+`</td>
                            <td className="lf">`+item.articleDate+`</td>
                            <td><button class="deleteBtn" type="submit" style="color: white; background-color: #ef5050">删除</button></td>
                        </tr>`;
                    $("#j_tb").append($trs);
                });
            }
        });
    }


    $(".queryBtn").click(function (){
        var data = $("#articleForm").serialize();
        $.get("article/findByTitle.do?"+data,function (result){
            console.info(result);
            $("#j_tb").empty();
            $("#tfoot").empty();
            $(result).each(function (index,item){
                var $trs =
                    `<tr>
                            <td><input type="checkbox" name="ck" id="ck" value="`+item.articleId+`"></td>
                            <td className="lf">`+item.articleId+`</td>
                            <td><a href="read.jsp?articleId=`+item.articleId+`">`+item.articleTitle+`</a></td>
                            <td className="lf">`+item.user.userName+`</td>
                            <td className="lf">`+item.articleDate+`</td>
                            <td><button class="deleteBtn" type="submit" style="color: white; background-color: #ef5050">删除</button></td>
                        </tr>`;
                $("#j_tb").append($trs);
            });
            var pageInfo = `
                    <tr>
                        <td colspan="6">
                            <span>共有`+result.pages+`页，当前是第`+result.pageNum+`页</span>&nbsp;&nbsp;
                            <a href="javasrcipt:void(0)" onclick="firstPage()">首页</a>
                            <a href="javasrcipt:void(0)" onclick=prePage(`+result.prePage+`)">上一页</a>
                            <a href="javasrcipt:void(0)" onclick=nextPage(`+result.nextPage+`,`+result.pages+`)">下一页</a>
                            <a href="javasrcipt:void(0)" onclick=tailPage(`+result.pages+`)">尾页</a>
                        </td>
                    </tr>`;
            $("#tfoot").append(pageInfo);
        });
    })



    $(document).on("click",".deleteBtn",function (result){
        var flag = window.confirm("您确定要删除该文章吗？...");
        if(flag){
            var articleId =  $(this).parents("tr").children().eq(1).text();
            $.get("article/deleteByArticleId.do?articleId="+articleId,function (result){
                console.info(result);
                if(result.msg){
                    alert(result.msg);
                    window.location.reload();
                }
                else {
                    alert(result.error);
                }
            });
        }
    });

    $("#deleteBatch").click(deleteBatch);

    function deleteBatch(){
        var zhi = $("input[name=ck]:checked");
        var str="";
        var id = "";
        if(zhi.length==0){
            alert("请选择要删除的文章");
        }else {
            if(confirm("您确定删除选择的"+zhi.length+"篇文章吗？")){
                $.each(zhi,function (index,item){
                    id=$(item).val();
                    if(id!=null)
                        str+=id+",";

                });
                $.ajax({
                    url: 'article/deleteBatch.do',
                    data:{"articleIds":str},
                    dataType: "text",
                    type: "get",
                    success:function (msg){
                        window.location.reload();
                    }
                });
            }
        }
    }




    // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function() {
        // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
        console.log(this.checked);
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }
    // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function() {
            // flag 控制全选按钮是否选中
            var flag = true;
            // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
            for (var i = 0; i < j_tbs.length; i++) {
                if (!j_tbs[i].checked) {
                    flag = false;
                    break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                }
            }
            j_cbAll.checked = flag;
        }
    }
</script>
</body>
</html>
